<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--
  Created by IntelliJ IDEA.
  User: k
  Date: 2022/4/1
  Time: 14:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<%--    <script type="text/javascript" src="jquery-3.4.1.min.js">--%>
<%--        $(function () {--%>
<%--            $("a.deleteClass").click(function () {--%>

<%--            })--%>
<%--        })--%>
<%--    </script>--%>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }

    .list-part {
        width: 450px;
        height: 400px;
        position: fixed;
        top: 80px;
        left: 50%;
        margin-left: -200px;
        /*opacity: 0;*/
        display: none;
        transition: opacity 1s ease 0s;
        border: .5px solid rgba(242, 242, 242, 0.58);
        box-shadow: 0 2px 2px 0 #d7d7d7;
        background: white;
        z-index: 999;
    }

    .list-part .cancel {
        width: 25px;
        height: 25px;
        font-size: 20px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
    }

    .list-part .cancel:hover {
        background: red;
        color: white;
    }

    .list-part .list-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 40px 0 0 100px;
    }

    .list-part .list-info .list-item {
        width: 200px;
        height: 30px;
        border: .5px solid rgba(242, 242, 242, 0.58);
        border-radius: 4px;
    }

    .list-part .list-info .list-item:focus {
        outline: .5px solid skyblue;
    }

    .list-part .list-info .list-btn {
        border: none;
        width: 50px;
        height: 30px;
        background: white;
        margin: 5px 0 0 65px;
        background: rgba(75, 156, 255, 0.96);
        color: white;
        border-radius: 5px;
        cursor: pointer;
        opacity: 0.7;
    }

    .list-part .list-info .list-btn:hover {
        opacity: 1;
    }

    .list-part .name-list {
        position: absolute;
        top: 23px;
        left: 15px;
    }

    .list-part .name-list .name-item {
        font-size: 14px;
        color: rgba(75, 156, 255, 0.96);
        padding-top: 20px;
        margin-top: 3px;
    }

    .shadow {
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 998;
        background-color: #000;
        opacity: 0.6;
        display: none;
    }

    .header {
        height: 80px;
        border-bottom: 1px solid rgba(242, 242, 242, 0.58);
        display: flex;
    }

    .header-left {
        display: flex;
        width: 92%;
    }

    .header-left-img {
        width: 60px;
        height: 60px;
    }

    .header-left .my_title {
        color: skyblue;
        padding: 10px 0 0 0;
    }

    .header-right-img {
        width: 60px;
        height: 60px;
        padding: 5px;
    }

    .content {
        display: grid;
        height: 500px;
        grid-template-columns: 1fr 6fr;
    }

    .content .menu {
        border-right: .5px solid rgba(242, 242, 242, 0.58);
    }

    .content .menu-item {
        text-align: center;
        padding-bottom: 10px;
    }

    .content .menu-item .menu__checked {
        display: none;
    }

    .content .menu-item .menu__checked:checked + .menu-info {
        background: rgba(75, 156, 255, 0.96);
        color: white;
        line-height: 40px;
        cursor: pointer;
        display: block;
    }

    .o-tb {
        margin: 15px;
        border-collapse: collapse;
        border: 0.5px solid rgba(242, 242, 242, 0.58);
        margin-bottom: 120px;
    }

    .o-tb-head {
        border: none;
        background: rgba(242, 242, 242, 0.58);
    }

    .o-tb-head .head-item .item-cell {
        color: rgba(75, 156, 255, 0.96);
        font-weight: normal;
        text-align: center;
        line-height: 30px;
    }

    .o-tb-body {
        font-size: 14px;
        color: #787878;
    }

    .o-tb-body tr td {
        text-align: center;
        line-height: 42px;
    }

    .button__m {
        border: none;
        display: inline-block;
        width: 40px;
        height: 25px;
        background: #007eff;
        border-radius: 3px;
    }

    .button__m a {
        color: white;
    }

    .input-val {
        display: inline-block;
        width: 20px;
        outline: none;
        border: none;
        text-align: center;
        color: #007eff;
        font-size: 20px;
        border-bottom: 1px solid;
    }

    .number-button {
        border: .5px solid #007eff;
        padding: 0 5px;
        /*background: #007eff;*/
        color: #007eff;
    }

    .selected {
        border: .5px solid #007eff;
        padding: 0 5px;
        background: #007eff;
        color: white;
    }

    .page_nav {
        display: flex;
    }

    .font {
        width: 100px;
        text-align: center;
    }

    .searChangeBtn {
        border: none;
        display: inline-block;
        width: 40px;
        height: 25px;
        background: #007eff;
        color: white;
        cursor: pointer;
        outline: none;
    }

    .searChangeBtn:hover {
        background: #0040ff;
    }

    .add_element {
        width: 80px;
        height: 80px;
        background: rgba(75, 156, 255, 0.96);
        position: fixed;
        right: 20px;
        bottom: 20px;
        border-radius: 50%;
    }

    .add_element .add__click {
        border: none;
        color: rgba(75, 156, 255, 0.96);
        background: white;
        display: inline-block;
        cursor: pointer;
        position: absolute;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-left: -25px;
        margin-top: -25px;
        text-align: center;
        line-height: 50px;
    }

    .add_element .add__click:hover {
        color: white;
        background: aquamarine;
    }

    .flow:hover{
        color: blue;
        position: relative;
        top: -3px;
        font-size: 20px;
        cursor: pointer;
    }
    .flow td img{
        margin-right: 15px;
    }
</style>
<body>
<!--表单-->
<div class="list-part" id="list-part">
    <div class="cancel" id="cancel">×</div>
    <form action="studentServlet"
            class="list-info"
            id="list-info"
            method="post">
        <input type="hidden" name="pageNo" value="${requestScope.page.pageNo}">
        <input type="hidden" name="action" value="${empty param.sno ? "add":"update"}">
        <input type="hidden" name="sno" value="${requestScope.student.sno}">
        <input id="order-id" class="list-item" name="sname" type="text" value="${requestScope.student.sname}" placeholder="姓名">
        <input id="goods-name" class="list-item" name="pwd" type="text" value="${requestScope.student.pwd}" placeholder="密码">
        <input id="goods-amount" class="list-item" name="age" type="text" value="${requestScope.student.age}" placeholder="年龄">
        <input  class="list-item" name="address" type="text" value="${requestScope.student.address}" placeholder="地址">
        <input id="list-btn" class="list-btn" type="submit" value="提交">
    </form>
    <!--添加一个ul列表-->
    <ul class="name-list">
        <li class="name-item">姓名</li>
        <li class="name-item">密码</li>
        <li class="name-item">年龄</li>
        <li class="name-item">地址</li>
    </ul>
</div>
<!--遮罩层-->
<div class="shadow" id="shadow"></div>
<header class="header">
    <div class="header-left">
        <img class="header-left-img" src="<%=request.getContextPath()%>img/osc.png" alt="">
        <h3 class="my_title">欢迎${sessionScope.user.sname}，查看学生管理系统</h3>
    </div>
    <div class="header-right">
        <img class="header-right-img" src="<%=request.getContextPath()%>img/rocket.png" alt="">
    </div>
</header>

<div class="content" id="content">
    <aside class="menu" id="menu">
        <dl class="menu-list">
            <dt class="menu-item">
                <input class="menu__checked" id="menu__checked" type="radio" checked="">
                <label class="menu-info" for="menu__checked">信息中心</label>
            </dt>
        </dl>
    </aside>
    <section class="main" id="main">
        <table class="o-tb">
            <colgroup>
                <col name="o-table_column_1" width="180">
                <col name="o-table_column_2" width="180">
                <col name="o-table_column_3" width="180">
                <col name="o-table_column_5" width="180">
            </colgroup>
            <thead class="o-tb-head">
            <tr class="head-item" id="head-item">
                <th colspan="1" rowspan="1" class="item-cell">姓名</th>
                <th colspan="1" rowspan="1" class="item-cell">年龄</th>
                <th colspan="1" rowspan="1" class="item-cell">地址</th>
                <th colspan="1" rowspan="1" class="item-cell">操作</th>
            </tr>
            </thead>
            <tbody class="o-tb-body" id="o-tb-body">
            <c:forEach items="${requestScope.page.items}" var="stu">
                <tr class="flow">
                    <td>${stu.sname}</td>
                    <td>${stu.age}</td>
                    <td>${stu.address}</td>
                    <td>

                            <a href="studentServlet?action=show&sno=${stu.sno}&pageNo=${requestScope.page.pageNo}"><img src="img/update.png" width="20" height="20"></a>



                            <a class="deleteClass" id="deleteClass"
                               href="studentServlet?action=delete&sno=${stu.sno}&pageNo=${requestScope.page.pageNo}" onclick="return confirmAct();"><img src="img/delete.png" width="20" height="20"></a>
                        <h1><a class="btn__click" href="courseServlet?action=selectStudentCourseTable">查看选课表</a></h1>

                    </td>

                </tr>
            </c:forEach>
            </tbody>
        </table>
    </section>
</div>
<div class="add_element">
    <button class="add__click"><a href="student_Edit.jsp?pageNo=${requestScope.page.pageTotal}">添加</a></button>

</div>

<div id="page_nav" class="page_nav">
    <div class="font">
        <%--    如果是第一页就不显示首页--%>
        <c:if test="${requestScope.page.pageNo>1}">
            <a href="studentServlet?action=pages&pageNo=1">首页</a>
            <a href="studentServlet?action=pages&pageNo=${requestScope.page.pageNo-1}">上一页</a>

        </c:if>
    </div>

    <div class="after">
        <c:choose>
            <c:when test="${requestScope.page.pageTotal<=10}">
                <c:forEach begin="1" end="${requestScope.page.pageTotal}" var="i">
                    <c:if test="${i==requestScope.page.pageNo}">
                        <span class="selected">${i}</span>
                    </c:if>
                    <c:if test="${i!=requestScope.page.pageNo}">
                        <a class="number-button" href="studentServlet?action=pages&pageNo=${i}">${i}</a>
                    </c:if>
                </c:forEach>
            </c:when>
        </c:choose>
        <%--    如果是最后一页就不显示末页--%>
        <c:if test="${requestScope.page.pageNo<requestScope.page.pageTotal}">
            <a href="studentServlet?action=pages&pageNo=${requestScope.page.pageNo+1}">下一页</a>
            <a href="studentServlet?action=pages&pageNo=${requestScope.page.pageTotal}">末页</a>

        </c:if>
        共${requestScope.page.pageTotal}页，${requestScope.page.pageTotalCount}条记录
        到第<input class="input-val" value="${requestScope.page.pageNo}" name="pn" id="pn_input" height="10px"
                 width="10px"/>页
        <input class="searChangeBtn" id="searChangeBtn" type="button" value="确定">
        <a href="index.jsp"><img src="img/returnhome.png" height="20px" width="20px"></a>
    </div>
</div>
</body>
<script type="text/javascript">
    const searChangeBtn = document.getElementById('searChangeBtn');
    const inputVal = document.getElementById('pn_input');
    const btn = document.getElementById('add__click');
    const form = document.getElementById('list-part');
    const cancel = document.getElementById('cancel');
    const btnSubmit = document.getElementById('list-btn');
    const shadow = document.getElementById('shadow');
    const tableBody = document.getElementById('o-tb-body');
    const deleteClass = document.getElementById('deleteClass');
    let varName;

    searChangeBtn.addEventListener('click', () => {
        if (inputVal.value >= 1 && inputVal.value <${requestScope.page.pageTotalCount}) {
            location.href = "http://localhost:8080/studentServlet?action=pages&pageNo=" + inputVal.value;
        } else {
            return;
        }

    })
    btn.addEventListener('click', () => {
        form.style.display = 'block';
        shadow.style.display = 'block';
    })

    cancel.addEventListener('click', () => {
        form.style.display = 'none';
        shadow.style.display = 'none';
    })


    function confirmAct(e)
    {
        console.log(e)
        if(confirm('确定要删除这行吗？'))
        {
            return true;
        }
        return false;
    }



</script>
</html>
